<h3> {{# dgettext }} tuleap-cardwall | Preview of the card {{/ dgettext }}</h3>

<div class="card-preview-info">
    {{# dgettext }}
        tuleap-cardwall |
        The preview respects the following rules:
    {{/ dgettext }}
    <ul>
        <li>
            {{# dgettext }}
                tuleap-cardwall |
                Card design is the same as Kanban.
            {{/ dgettext }}
        </li>
        <li>
            {{# dgettext }}
                tuleap-cardwall |
                A card will be displayed for each available background color.
            {{/ dgettext }}
        </li>
        <li>
            {{# dgettext }}
                tuleap-cardwall |
                If a color corresponds to multiple values, the preview will display only one card with this background color.
            {{/ dgettext }}
        </li>
    </ul>
</div>

{{# card_preview }}
    <div class="card-preview card-style-{{ background }}">
        <div class=" card-type-border-{{ tracker_color }}"></div>
        <div class="card-preview-content-fields">
            <div class="card-preview-content">
                <span class="card-preview-id">{{ tracker_shortname }} #XXX</span><i class="far fa-clock card-preview-fa-clock-o"></i>
                <span class="card-preview-title {{# user_has_accessibility_mode }}card-preview-title-accessibility{{/ user_has_accessibility_mode }}">
                    {{# dgettext }}
                        tuleap-cardwall |
                        This is an example title
                    {{/ dgettext }}
                </span>
                {{# user_has_accessibility_mode }}<div class="card-accessibility"></div>{{/ user_has_accessibility_mode }}
            </div>
            <div class="card-preview-fields card-details">
                {{# card_preview_details }}
                    <span class="card-preview-field-label">{{ field_label }}</span>
                    <span class="card-preview-field-value">XXX</span>
                {{/card_preview_details}}
            </div>
        </div>
    </div>
{{/ card_preview }}